<template>
	<view>
		<image class="img" src="../../static/img/bjImg.jpeg" mode="widthFix"></image>
		<view class="body">
			<view class="list" v-for="(item,index) in datalist" :key="index">
				<image class="list-img" :src="item.tp" mode=""></image>
				<view class="num">{{item.name}}</view>
				<view class="line"></view>
				<view class="txt">{{item.hy}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist:[],
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData(){
				this.requestfs({
					url:'/mall/type/hyList',
				}).then(res=>{
					if(res.data.msg=="success"){
						this.datalist=res.data.data
					}
				})
			}
		}
	}
</script>

<style>
.img{
	width: 750rpx;
}
.body{
	width: 750rpx; 
	position: absolute;
	top: 140rpx;
	background-color: #f3f5f7;
	border-radius: 13rpx;
	min-height: 100vh;
	height: auto;
	padding-top: 30rpx;
}
.list{
	width: 710rpx;
	height: 150rpx;
	line-height: 150rpx;
	margin: 0 auto;
	display: flex;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}
.num{
	color: black;
	font-size: 36rpx;
	font-weight: bold;
	margin: 0 32rpx 0 25rpx;
}
.line{
	width: 1px;
	height: 60rpx;
	background-color: #e4e7ea;
	margin: auto 0;
}
.txt{
	margin:auto 30rpx;
	color: #71797f;
	width: 47%;
	font-size: 26rpx;
}
.list-img{
	width: 100rpx;
	height:100rpx;
	border-radius: 50%;
	margin-top: 25rpx;
	margin-left: 26rpx;
}
</style>
